<script setup lang="ts">
import { nextTick, ref } from 'vue'
import { usePageConfig } from './config/index.ts'
import NTableBuilder from '@/components/NTableBuilder/index.vue'
import { useTable } from '@/hooks/useTable.ts'

defineOptions({
  name: 'MenuManagement',
})

/**
 * 获取页面配置
 * */
const pageConfig = usePageConfig()
const { table, tableProps } = useTable(pageConfig)

/**
 *  全部展开/折叠
 * */
const expandAll = ref(false)
const showTable = ref(true)
const handOpenSouChange = () => {
  showTable.value = false
  expandAll.value = !expandAll.value
  nextTick(() => {
    showTable.value = true
  })
}
</script>

<template>
  <n-table-builder v-model="table.tableInfo" v-bind="tableProps">
    <template #toolLeft>
      <n-button type="primary" @click="handOpenSouChange()">
        <span class="pl8">展开/折叠</span>
      </n-button>
      <span class="tip">非开发人员禁止操作菜单</span>
    </template>
  </n-table-builder>
</template>

<style lang="scss" scoped>
.tip {
  margin-left: 10px;
  font-size: 12px;
  color: orangered;
}
</style>
